<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <!-- <el-form-item label="序号" prop="heathCode">
        <el-input v-model="formData.heathCode" placeholder="请输入序号" />
      </el-form-item>
      <el-form-item label="机器人id" prop="robotId">
        <el-input v-model="formData.robotId" placeholder="请输入机器人id" />
      </el-form-item> -->
      <el-form-item label="机器人类型" prop="robotType">
        <el-select v-model="formData.robotType" placeholder="请选择机器人类型">
          <el-option label="智能盘点机器人" value="1" />
          <el-option label="智能还书系统" value="2" />
          <el-option label="智能导览机器人" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="机器人编号" prop="robotCode">
        <el-input v-model="formData.robotCode" placeholder="请输入机器人编号" />
      </el-form-item>
      <el-form-item label="机器人名称" prop="robotName">
        <el-input v-model="formData.robotName" placeholder="请输入机器人名称" />
      </el-form-item>
      <el-form-item label="客户" prop="customer">
        <el-input v-model="formData.customer" placeholder="请输入客户" />
      </el-form-item>
      <el-form-item label="故障描述" prop="faultRemark">
        <el-input v-model="formData.faultRemark" placeholder="请输入故障描述" />
      </el-form-item>
      <el-form-item label="地区" prop="area">
        <el-input v-model="formData.area" placeholder="请输入地区" />
      </el-form-item>
      <el-form-item label="故障严重程度" prop="severity">
        <el-select
          v-model="formData.severity"
          placeholder="请选择故障严重程度"
          clearable
          class="!w-240px"
        >
          <el-option label="轻微" value="1" />
          <el-option label="一般" value="2" />
          <el-option label="严重" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="处理状态" prop="handleStatus">
        <el-radio-group v-model="formData.handleStatus">
          <el-radio key="0" label="0"> 未处理 </el-radio>
          <el-radio key="1" label="1"> 处理中 </el-radio>
          <el-radio key="2" label="2"> 已处理 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="检测时间" prop="findTime">
        <el-date-picker
          v-model="formData.findTime"
          type="date"
          value-format="x"
          placeholder="选择检测时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading"
        >确 定</el-button
      >
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from "@/utils/dict";
import {
  RobotFaultMonitorApi,
  RobotFaultMonitorVO,
} from "@/api/health/robotfaultmonitor";

/** 故障监测 表单 */
defineOptions({ name: "RobotFaultMonitorForm" });

const { t } = useI18n(); // 国际化
const message = useMessage(); // 消息弹窗

const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref(""); // 弹窗的标题
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref(""); // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  heathCode: undefined,
  robotId: undefined,
  robotType: undefined,
  robotCode: undefined,
  robotName: undefined,
  customer: undefined,
  faultRemark: undefined,
  area: undefined,
  severity: undefined,
  handleStatus: undefined,
  findTime: undefined,
});
const formRules = reactive({
  customer: [{ required: true, message: "客户不能为空", trigger: "blur" }],
  findTime: [{ required: true, message: "检测时间不能为空", trigger: "blur" }],
});
const formRef = ref(); // 表单 Ref
//枚举
const rbtType = (status) => {
  if (status == 1) {
    return "智能导览机器人";
  } else if (status == 2) {
    return "智能还书系统";
  } else if (status == 3) {
    return "智能盘点机器人";
  }
};
const severityType = (status) => {
  console.log(status, "status");

  const STATUSES = [
    { severity: 1, name: "轻微" },
    { severity: 2, name: "一般" },
    { severity: 3, name: "严重" },
  ];

  const matched = STATUSES.find((item) => item.severity === status);
  return matched ? matched.name : "";
};
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true;
  dialogTitle.value = t("action." + type);
  formType.value = type;
  resetForm();
  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    try {
      formData.value = await RobotFaultMonitorApi.getRobotFaultMonitor(id);
    } finally {
      formLoading.value = false;
    }
  }
};
defineExpose({ open }); // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(["success"]); // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate();
  // 提交请求
  formLoading.value = true;
  try {
    const data = formData.value as unknown as RobotFaultMonitorVO;
    if (formType.value === "create") {
      await RobotFaultMonitorApi.createRobotFaultMonitor(data);
      message.success(t("common.createSuccess"));
    } else {
      await RobotFaultMonitorApi.updateRobotFaultMonitor(data);
      message.success(t("common.updateSuccess"));
    }
    dialogVisible.value = false;
    // 发送操作成功的事件
    emit("success");
  } finally {
    formLoading.value = false;
  }
};

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    heathCode: undefined,
    robotId: undefined,
    robotType: undefined,
    robotCode: undefined,
    robotName: undefined,
    customer: undefined,
    faultRemark: undefined,
    area: undefined,
    severity: undefined,
    handleStatus: undefined,
    findTime: undefined,
  };
  formRef.value?.resetFields();
};
</script>
